<template>
  <div class="layout">
    <!-- 头部 -->
    <header>
      <!-- 虚化 -->
      <div class="bcg" :style="{backgroundImage:'url(' +storeInfo.avatar+ ')'}"></div>
      <!-- 蒙层 -->
      <div class="mask"></div>
      <div class="store-info">
        <div class="info-con">
          <img :src="storeInfo.avatar" alt="">
          <ul>
            <li><span>品牌</span>{{storeInfo.name}}</li>
            <li>{{storeInfo.description}}/ {{storeInfo.deliveryTime}}分钟送达</li>
            <li>
              <span>减</span>
              <p>{{storeInfo.supports.join(' ')}}</p>
              <em>{{storeInfo.supports.length}}个&nbsp;&nbsp;></em>
            </li>
          </ul>
        </div>
        <div class="info-not" @click="isshow=true">
          <span>公告</span>
          <p>{{storeInfo.bulletin}}</p>
          <em>&nbsp;></em>
        </div>
      </div>

    </header>
    <div class="main">
      <van-tabs v-model="mactive" swipeable color="#ffc300" title-active-color="#ffc300">
        <van-tab title="商品" to="/goods"></van-tab>
        <van-tab title="评价" to="/rating"></van-tab>
        <van-tab title="商家" to="/seller"></van-tab>
      </van-tabs>
      <!-- 路由出口 -->
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
    <div class="bulletin-mask" v-show="isshow">
      <van-icon name="arrow-left" size="28px" @click="isshow=false" />
      <div class="store-name">
        <h2>{{storeInfo.name}}</h2>
        <van-rate v-model="storeInfo.score" :size="25" color="#ffd21e" readonly allow-half void-icon="star" void-color="#eee" />
      </div>
      <div class="store-supp">
        <van-divider :style="{ color: '#fff', borderColor: '#7b7f82',fontSize:'20px',marginBottom: '15px' }">优惠信息</van-divider>
        <p v-for="(item,index) in storeInfo.supports" :key="index">{{item}}</p>
      </div>
      <div class="store-bull">
        <van-divider :style="{ color: '#fff', borderColor: '#7b7f82',fontSize:'20px',marginBottom: '15px' }">商家公告</van-divider>
        <p>{{storeInfo.bulletin}}</p>
      </div>
    </div>
  </div>

</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { getSeller_api } from "@/apis/seller.js";

//对象接口
interface Store {
  avatar: string; //头像
  bulletin: string; //活动
  date: string[]; //营业时间
  deliveryPrice: number; //配送费
  deliveryTime: number; //配送时间
  description: string; //配送方式
  id: number; //id
  minPrice: number; //起送价格
  name: string; //店铺名
  pics: string[]; //店铺图片
  score: number; //店铺评分
  sellCount: number; //销售量
  supports: string[]; //支持活动
}
@Component({})
export default class extends Vue {
  mactive = 0; //导航默认激活样式
  isshow = false;
  //店铺数据
  storeInfo: Store = {
    avatar: "",
    bulletin: "",
    date: [],
    deliveryPrice: 0,
    deliveryTime: 0,
    description: "",
    id: 0,
    minPrice: 0,
    name: "",
    pics: [],
    score: 0,
    sellCount: 0,
    supports: [],
  };

  //创建后
  async created() {
    switch (this.$route.path) {
      case "/goods":
        this.mactive = 0;
        break;
      case "/rating":
        this.mactive = 1;
        break;
      case "/seller":
        this.mactive = 2;
        break;
    }
    //获取商家信息
    let res = await getSeller_api();
    this.storeInfo = res.data.data;
    //console.log(this.storeInfo);
    //动态传参
  }
}
</script>

<style lang="scss" scoped>
header {
  height: 200px;
  position: relative;
  .bcg {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(8px); /*虚化值，越大越模糊*/
  }
  // 蒙层
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.4);
  }
  .store-info {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 44;
    width: 100%;
    height: 100%;
    color: #fff;
    .info-not {
      height: 20%;
      background-color: #fff;
      background-color: rgba($color: #000000, $alpha: 0.4);
      padding: 0 10px;
      font-size: 14px;
      display: flex;
      align-items: center;
      span {
        background-color: #fff;
        color: #3a434a;
        font-weight: bold;
        margin-right: 6px;
        padding: 2px;
      }
      p {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 80%;
      }
      em {
        font-size: 16px;
      }
    }
    .info-con {
      display: flex;
      height: 80%;
      align-items: center;
      li:first-child {
        font-weight: bold;
        font-size: 20px;
        span {
          font-size: 14px;
          padding: 3px;
          margin-right: 8px;
          background-color: #f01414;
        }
      }
      li:nth-child(2) {
        margin: 10px 0;
      }
      li:last-child {
        display: flex;
        position: relative;
        span {
          color: #f67172;
          background-color: #fff;
          font-weight: 700;
          padding: 1px;
          margin-right: 4px;
        }
        p {
          //一行超出隐藏
          width: 180px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 14px;
        }
        em {
          position: absolute;
          top: -6px;
          right: -40px;
          font-style: normal;
          padding: 6px 6px;
          border-radius: 14px;
          font-size: 14px;
          background-color: rgba($color: #000000, $alpha: 0.4);
        }
      }
      img {
        width: 80px;
        height: 80px;
        border-radius: 10px;
        margin: 0 10px 0 20px;
      }
    }
  }
}

.main {
  /* 当前屏幕可见高度的1% */
  height: 100vh;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow-y: scroll;
  }
  .van-tabs {
    border-bottom: 1px solid #eff1f0;
  }
}
.layout {
  position: relative;
  // width: 100%;
  // height: 100%;
}
.bulletin-mask {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: rgba($color: #000000, $alpha: 0.9);
  color: #fff;
  padding: 0 20px;
  .van-icon-arrow-left {
    position: absolute;
    top: 10px;
    left: 10px;
  }
  .store-name {
    text-align: center;
    padding: 80px 0 20px;
    h2 {
      margin-bottom: 20px;
    }
  }
  .store-supp {
    p {
      line-height: 40px;
    }
  }
  .store-bull {
    p {
      color: #f9fafc;
      line-height: 30px;
    }
  }
}
</style>